<template>
	<view class="register">
		<!--logo-->
		<view class="register-top">
			<view class="logo iconfont icon-fen"></view>
			<view class="title">考试系统</view>
		</view>
		<!--表单-->
		<view class="register-bottom">
			<uni-forms label-position="top" ref="form" :modelValue="formData" :rules="rules">
				<uni-forms-item label="用户名" name="userName">
					<uni-easyinput class="register-box-input" placeholder="用户名" v-model.trim="formData.userName"/>
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput type="password" class="register-box-input" placeholder="密码" v-model.trim="formData.password"/>
				</uni-forms-item>
				<uni-forms-item label="年级" name="userLevel">
					 <!-- <hpy-form-select class="register-box-input" @change="change" :dataList="grades" text="text" name="value" v-model="formData.userLevel"/> -->
					<zw-select class="select" v-model="formData.userLevel" :data="grades" labelKey="text" valKey="value"></zw-select>
				</uni-forms-item>
			</uni-forms>
			<button @click="submit">注册</button>
		</view>
		<view class="login">
			<view class="content1">已有账号？</view>
			<view class="content2" @click="navigatorToLogin">登录</view>
		</view>
		<!-- <view class="version">{{ version }}</view> -->
	</view>
</template>

<script>
	import hpyFormSelect from '@/components/uni_modules/hpy-form-select/components/hpy-form-select/hpy-form-select.vue'
	export default {
		data(){
			return {
				//版本号
				version: this.$constant.version,
				//表单数据
				formData:{
					userName: "", //用户名
					password:"", //密码
					userLevel:""
				},
				//校验规则
				rules: {
					//对username字段进行必填校验
					userName : {
						rules: [{
							required: true,
							errorMessage: "请填写用户名！"
						}]
						
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "请填写密码！"
						}]
					},
					grade : {
						rules: [{
							required: true,
							errorMessage: "请选择年级！"
						}]
					}
					
				},
				grades:[{
					text: '一年级',
					value: 1
				},{
					text: '二年级',
					value: 2
				},{
					text: '三年级',
					value: 3
				},{
					text: '四年级',
					value: 4
				},{
					text: '五年级',
					value: 5
				},{
					text: '六年级',
					value: 6
				},{
					text: '初一',
					value: 7
				},{
					text: '初二',
					value: 8
				},{
					text: '初三',
					value: 9
				},{
					text: '高一',
					value: 10
				},{
					text: '高二',
					value: 11
				},{
					text: '高三',
					value: 12
				}]
			}
		},
		components:{hpyFormSelect},
		methods: {
			//触发提交表单
			submit(){
				this.$refs.form.validate().then(res => {
					if( this.formData.userName == ""){
						uni.showToast({
						  title: "请填写用户名！",
						  icon: "none",
						  duration: 2000,
						});
						return;
					}
					if( this.formData.password == ""){
						uni.showToast({
						  title: "请填写密码！",
						  icon: "none",
						  duration: 2000,
						});
						return;
					}
					if( this.formData.userLevel == ""){
						uni.showToast({
						  title: "请选择年级！",
						  icon: "none",
						  duration: 2000,
						});
						return;
					}
					//进行注册
					uni.request({
						url: "/api/student/user/register",
						method: "POST",
						data: this.formData,
						success : (resp)=>{
							uni.showToast({
								title: resp.data.message
							})
							if(resp.data.code == 200){
								uni.redirectTo({
									url: "/pages/login/login"
								})
							}
						},fail: (err)=>{
							uni.showToast({
								title: "内部错误"
							})
						}
					})
				
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				
			},
			change(data){
				console.log(data.value);
				// this.formData.userLevel = data.value.text;
			},
			//跳转到登录页面
			navigatorToLogin(){
				uni.navigateTo({
				    url: '/pages/login/login'
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
page{
	height: 100%;
}
.register{
	width:100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(#66BB6A,#ffffff 28%);
	padding-top: 20%;
	box-sizing: border-box;
	.register-top{
		display: flex;
		flex-direction: column;
		.logo{
			font-size: 230rpx;
			color:#66BB6A;
		}
		.title{
			font-size: 56rpx;
			font-weight: 300;
		}
	}
	
	.register-bottom{
		width:94%;
		margin-top: 50rpx;
		.select{
			// width:40%;
			min-height: 72rpx;
			background: #F8F8F8;
			margin-top: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1rpx solid #c8c7cc;
			border-radius: 8rpx;
			padding-left: 10rpx;
		}
		.register-box-input{
			background-color:#F8F8F8 ;
		}
		button{
			margin-top: 10rpx;
			background: #66BB6A;
		}
	}
	.login{
		display: flex;
		font-size: 28rpx;
		margin: 20rpx 0 0 0;
		.content1{
			color:#C0C4CC;
		}
		.content2{
			margin: 0 0 0 10rpx;
			color:#66BB6A;
		}
	}
	.version{
		position: fixed;
		bottom: 12rpx;
		width: 100%;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
}
</style>
